<template>
	<view class="box">
		<u-time-line>
			<u-time-line-item nodeTop="2" v-if="oneData.id">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<view class="u-node" style="background: #19be6b;">
						<!-- 此处为uView的icon组件 -->
						<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
					</view>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-title">{{ text }}</view>
						<view class="u-order-desc">{{ oneData.context }}</view>
						<view class="u-order-time">{{ oneData.time }}</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item v-for="item in list" :key="item.id">
				<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
				<template v-slot:content>
					<view>
						<view class="u-order-desc">{{ item.context }}</view>
						<view class="u-order-time">{{ item.time }}</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
		<!-- 暂无数据 -->
		<uni-nodata v-if="list.length == 0"></uni-nodata>
	</view>
</template>

<script>
export default {
	data() {
		return {
			nu: '',
			list: [],
			oneData: {}
		};
	},

	onLoad(options) {
		this.nu = options.nu;
		console.log(this.nu);
	},
	onReady() {
		this.getData();
	},
	computed: {
		text() {
			switch (this.oneData.state) {
				case 0:
					return '在途中';
					break;
				case 1:
					return '揽收中';
					break;
				case 2:
					return '疑难中';
					break;
				case 3:
					return '已签收';
					break;
				case 4:
					return '退签中';
					break;
				case 5:
					return '派件中';
					break;
				case 6:
					return '退回中';
					break;
				case 7:
					return '已转投';
					break;
				case 10:
					return '待清关';
					break;
				case 11:
					return '清关中';
					break;
				case 12:
					return '已清关';
					break;
				case 13:
					return '清关异常';
					break;
				case 14:
					return '已拒签';
					break;
				default:
					return '不详';
			}
		}
	},
	methods: {
		getData() {
			this.$store.dispatch('getFastMailPage', { nu: this.nu }).then(res => {
				console.log(res);
				this.list = res.data;
				this.oneData = this.list.shift();
				console.log(this.oneData);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	background: #fff;
	padding: 20rpx 50rpx;
	border-radius: 10rpx;
	width: 90%;
	min-height: calc(100vh - 40rpx);
	margin: 20rpx auto;
}
.u-node {
	width: 44rpx;
	height: 44rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-title {
	color: #333333;
	font-weight: bold;
	font-size: 32rpx;
}

.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 28rpx;
	margin-bottom: 6rpx;
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;
}
</style>
